* {
  margin: 0;
  padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-family: 'Microsoft YaHei';
  font-weight: 100;
  overflow: hidden; }

body {
  background-image: url(402a5fb2f1846e0edf37f675791d672d.png);
  background-size: cover;
  color: #fff; }

.flex-row-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.flex-column-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.flex-row-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

#content {
  width: 100%;
  height: 100%; }

.App {
  width: 100%;
  height: 100%; }

.App-header {
  width: 100%;
  height: 7%;
  background: url(61de2ab11fbe96b58c51cb96459624e0.png) center no-repeat;
  background-size: contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative; }
  .App-header .title {
    font-size: 2.8rem; }
  .App-header .date, .App-header .time {
    font-size: 1.2rem;
    color: #00ffff;
    position: absolute;
    top: 12%; }
  .App-header .date {
    left: 16.5%; }
  .App-header .time {
    right: 16.5%; }

.App-content {
  width: 100%;
  height: 93%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1%; }
  .App-content div {
    height: 100%; }
  .App-content .content-left {
    width: 22.84%;
    margin-left: 1.3%;
    position: relative; }
    .App-content .content-left .left-up {
      width: 130%;
      height: 12.2%;
      position: absolute;
      top: -1%;
      left: -15%;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-left .left-center {
      width: 120%;
      height: 37%;
      position: absolute;
      top: 11.5%;
      left: -10%;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-left .left-down {
      width: 107%;
      height: 43.5%;
      position: absolute;
      bottom: 4%;
      left: -3.5%;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-left > div {
      margin: 4% 0; }
    .App-content .content-left .content-left-tempHumiDust {
      width: 100%;
      height: 10%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .App-content .content-left .content-left-tempHumiDust div {
        width: 33%;
        height: 100%; }
      .App-content .content-left .content-left-tempHumiDust .temperature div:first-child {
        background: url(b646d76f4aec6106ce3e99afe5cbda70.png) center no-repeat;
        background-size: contain; }
      .App-content .content-left .content-left-tempHumiDust .humidity div:first-child {
        background: url(61368243b8358d09e26147906d86b819.png) center no-repeat;
        background-size: contain; }
      .App-content .content-left .content-left-tempHumiDust .dust div:first-child {
        background: url(8723956ebb0513c820eaacc5bc9d45f7.png) center no-repeat;
        background-size: contain; }
    .App-content .content-left .content-left-tempHumiTrend {
      width: 100%;
      height: 13.6%; }
    .App-content .content-left .content-left-dustTrend {
      width: 100%;
      height: 12%; }
    .App-content .content-left .content-left-energy {
      width: 100%;
      height: 7%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .App-content .content-left .content-left-energy .energy {
        width: 20%;
        height: 100%;
        background: url() no-repeat;
        background-size: contain; }
        .App-content .content-left .content-left-energy .energy .energy-title {
          height: auto;
          text-align: center;
          margin-top: .5rem;
          font-size: 1rem; }
        .App-content .content-left .content-left-energy .energy .energy-data {
          height: auto;
          text-align: center;
          margin-top: 1rem;
          font-size: 1.4rem;
          color: #fbff7f; }
    .App-content .content-left .content-left-lineStatus {
      width: 100%;
      height: 10%; }
      .App-content .content-left .content-left-lineStatus .lineStatus-title {
        font-size: 1.2rem;
        color: #00ffff;
        height: auto;
        margin: 2%; }
      .App-content .content-left .content-left-lineStatus .lineStatus-guide {
        text-align: right;
        margin-bottom: .6rem;
        margin-right: 5%;
        height: auto; }
        .App-content .content-left .content-left-lineStatus .lineStatus-guide span {
          vertical-align: middle;
          margin-left: 1rem; }
          .App-content .content-left .content-left-lineStatus .lineStatus-guide span i {
            display: inline-block;
            width: .7rem;
            height: .7rem;
            border-radius: 0.5rem;
            margin-right: 1rem; }
          .App-content .content-left .content-left-lineStatus .lineStatus-guide span .running {
            background-color: #7fffaa; }
          .App-content .content-left .content-left-lineStatus .lineStatus-guide span .idle {
            background-color: #fbff7f; }
          .App-content .content-left .content-left-lineStatus .lineStatus-guide span .down {
            background-color: #ff4c76; }
      .App-content .content-left .content-left-lineStatus .lineStatus-gantt {
        width: 90%;
        height: 20%;
        margin: 0 auto;
        border-radius: 2rem;
        border: 1px solid #035ddc;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .App-content .content-left .content-left-lineStatus .lineStatus-gantt .dashed-line {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50%;
          width: 99%;
          height: 0;
          border: 1px dashed #4f5e79;
          z-index: -1; }
        .App-content .content-left .content-left-lineStatus .lineStatus-gantt .gantt {
          width: 80%;
          height: 120%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-flow: row nowrap;
                  flex-flow: row nowrap;
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          .App-content .content-left .content-left-lineStatus .lineStatus-gantt .gantt div {
            height: 120%; }
          .App-content .content-left .content-left-lineStatus .lineStatus-gantt .gantt div:nth-child(1) {
            border-radius: .3rem 0 0 .3rem; }
          .App-content .content-left .content-left-lineStatus .lineStatus-gantt .gantt div:last-child {
            border-radius: 0 .3rem .3rem 0; }
      .App-content .content-left .content-left-lineStatus .lineStatus-time {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin-top: 1rem; }
        .App-content .content-left .content-left-lineStatus .lineStatus-time span {
          display: inline;
          font-size: 1.1rem; }
        .App-content .content-left .content-left-lineStatus .lineStatus-time .running {
          color: #7fffaa; }
        .App-content .content-left .content-left-lineStatus .lineStatus-time .idle {
          color: #fbff7f; }
        .App-content .content-left .content-left-lineStatus .lineStatus-time .down {
          color: #ff4c76; }
    .App-content .content-left .content-left-equipmentStatus {
      width: 100%;
      height: 31%; }
      .App-content .content-left .content-left-equipmentStatus .orderID {
        height: auto;
        color: #00ffff;
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        margin-left: 2%; }
      .App-content .content-left .content-left-equipmentStatus .equipment-content {
        /*background: url("../images/status-background.png") 1rem 0 no-repeat;
        background-size: contain;*/
        width: 95%;
        margin-left: 7%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap; }
      .App-content .content-left .content-left-equipmentStatus .equipment-status-down {
        width: 10%;
        height: 55%;
        margin-top: 10%;
        margin-left: -5%;
        background: url() left no-repeat;
        background-size: contain; }
      .App-content .content-left .content-left-equipmentStatus .equipmentStatus {
        height: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; }
        .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment-status-right {
          width: 10%;
          height: 60%;
          background: url() center no-repeat;
          background-size: contain; }
        .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment-status-left {
          width: 10%;
          height: 60%;
          background: url() center no-repeat;
          background-size: contain; }
        .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment {
          position: relative;
          width: 25%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-flow: column nowrap;
                  flex-flow: column nowrap;
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment .equipment-img {
            display: inline-block;
            width: 100%; }
          .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment .equipment-lamp {
            width: 1rem;
            height: 1rem;
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            border-radius: 0.5rem; }
          .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment .equipment-info {
            width: 200%;
            height: auto;
            text-align: center; }
            .App-content .content-left .content-left-equipmentStatus .equipmentStatus .equipment .equipment-info div {
              height: auto;
              font-size: 1rem;
              -webkit-transform: scale(0.8);
                  -ms-transform: scale(0.8);
                      transform: scale(0.8); }
  .App-content .content-center {
    width: 48%;
    position: relative; }
    .App-content .content-center .center-up {
      width: 110%;
      height: 47%;
      position: absolute;
      top: 0.5%;
      left: -5%;
      background: url(0044dfcc46c2bc84d68299751392d32b.png) center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-center .center-down {
      width: 102%;
      height: 55%;
      position: absolute;
      bottom: 1%;
      left: -1%;
      background: url(0044dfcc46c2bc84d68299751392d32b.png) center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-center .linkageMap-title {
      height: auto;
      text-align: center;
      font-size: 1.2rem;
      color: #00ffff;
      position: relative;
      margin: 1rem 0 .5rem 0; }
      .App-content .content-center .linkageMap-title .linkageMap-title-guide {
        width: 50%;
        position: absolute;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 1rem;
        color: #fff; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide div {
          width: auto; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide i {
          display: inline-block;
          width: .7rem;
          height: .7rem;
          border-radius: 1rem;
          margin: 0 .5rem; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide .idle {
          background-color: #fbff7f; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide .running {
          background-color: #7fffaa; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide .wait {
          background-color: #fff; }
        .App-content .content-center .linkageMap-title .linkageMap-title-guide .down {
          background-color: #ff4c76; }
      .App-content .content-center .linkageMap-title .guide-left {
        left: 0;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; }
      .App-content .content-center .linkageMap-title .guide-right {
        right: 0;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end; }
    .App-content .content-center .content-center-linkageMap {
      /*width: 100%;
      height: 40%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      >div {
        width: 14%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        >div {
          width: 100%;
          height: 14%;
          border: 1px solid green;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
      }
      >div:nth-child(7) {
        >div:nth-child(2n) {
          height: 29%;
        }
      }*/
      width: 100%;
      height: 43%;
      background: url(5290c0718f28ac418491606b4250810c.png) center no-repeat;
      background-size: contain;
      position: relative; }
      .App-content .content-center .content-center-linkageMap .sequence-start {
        height: auto;
        position: absolute;
        bottom: -25%; }
        .App-content .content-center .content-center-linkageMap .sequence-start div {
          height: auto; }
      .App-content .content-center .content-center-linkageMap > div {
        width: 90%;
        height: 20%;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; }
        .App-content .content-center .content-center-linkageMap > div .sequence {
          width: 20%;
          height: 120%;
          -webkit-transform: scale(0.7);
              -ms-transform: scale(0.7);
                  transform: scale(0.7);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-flow: column nowrap;
                  flex-flow: column nowrap;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          z-index: 1; }
        .App-content .content-center .content-center-linkageMap > div .sequence-auto {
          width: 40%; }
        .App-content .content-center .content-center-linkageMap > div .arrow-auto {
          width: 320%; }
        .App-content .content-center .content-center-linkageMap > div .arrow {
          width: 20%;
          height: 120%;
          -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
                  transform: scale(0.8);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-flow: column nowrap;
                  flex-flow: column nowrap;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          .App-content .content-center .content-center-linkageMap > div .arrow .sequence-arrow {
            -webkit-transform: scale(0.6);
                -ms-transform: scale(0.6);
                    transform: scale(0.6); }
      .App-content .content-center .content-center-linkageMap .sequence-title {
        height: auto;
        width: 200%;
        font-size: 1rem;
        text-align: center;
        -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
                transform: scale(1.2); }
      .App-content .content-center .content-center-linkageMap .sequence-img {
        width: 100%;
        height: 70%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
      .App-content .content-center .content-center-linkageMap .arrow-explain {
        width: 200%;
        height: auto;
        text-align: center; }
      .App-content .content-center .content-center-linkageMap .sequence-arrow {
        width: 260%;
        height: 30%;
        margin: .5rem 0; }
      .App-content .content-center .content-center-linkageMap .arrow-left {
        background: url() center no-repeat;
        background-size: cover; }
      .App-content .content-center .content-center-linkageMap .arrow-left-right {
        background: url() center no-repeat;
        background-size: cover; }
      .App-content .content-center .content-center-linkageMap .sequence-ERP {
        width: 13%;
        height: 100%; }
      .App-content .content-center .content-center-linkageMap .arrow-explain-vertical {
        width: 1rem;
        height: auto;
        -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
                transform: scale(0.8); }
      .App-content .content-center .content-center-linkageMap .arrow-vertical {
        width: 20%;
        height: 200%; }
      .App-content .content-center .content-center-linkageMap .arrow-vertical-short {
        background: url() center no-repeat;
        background-size: contain;
        -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
                transform: scale(0.7); }
      .App-content .content-center .content-center-linkageMap .arrow-vertical-long {
        background: url() center no-repeat;
        background-size: contain;
        -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
                transform: scale(0.7); }
      .App-content .content-center .content-center-linkageMap .vertical {
        width: 100%;
        height: 40%; }
      .App-content .content-center .content-center-linkageMap .sequence-title-scale {
        -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
                transform: scale(0.8); }
      .App-content .content-center .content-center-linkageMap .linkageMap-message {
        /*width: 95%;
        height: 60%;
        border: 1px solid pink;
        background: url("../images/linkageMap/message2.png") no-repeat;
        background-size: contain;
        padding: 0 5%;*/
        /*.linkageMap-message-up {
          width: 95%;
          height: 66%;
        }*/
        width: 95%;
        height: 55%;
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        background: url(0bee3bb2d8d683cce0f490fa5173aa4b.png) center top no-repeat;
        background-size: contain;
        z-index: -1; }
      .App-content .content-center .content-center-linkageMap .sequence-auto {
        /*background: url("../images/linkageMap/auto2.png") bottom no-repeat;
        background-size: contain;*/
        position: relative; }
        .App-content .content-center .content-center-linkageMap .sequence-auto .sequence-auto-bkgImg {
          position: absolute;
          bottom: -8%;
          left: 50%;
          width: 105%;
          height: 100%;
          margin-left: -53%;
          background: url(cfdaf6506a403813df5de62b305c7ca7.png) bottom no-repeat;
          background-size: contain;
          z-index: -1; }
      .App-content .content-center .content-center-linkageMap .sequence-MES {
        width: 13%; }
      .App-content .content-center .content-center-linkageMap .sequence-str {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .App-content .content-center .content-center-linkageMap .sequence-str span {
          display: block;
          -webkit-transform: scale(0.8);
              -ms-transform: scale(0.8);
                  transform: scale(0.8); }
    .App-content .content-center .content-center-important {
      width: 100%;
      height: 48%; }
      .App-content .content-center .content-center-important .important-up {
        width: 100%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-top: 2%; }
        .App-content .content-center .content-center-important .important-up > div {
          width: 25%;
          height: auto;
          border-radius: 1rem; }
          .App-content .content-center .content-center-important .important-up > div img {
            width: 100%; }
        .App-content .content-center .content-center-important .important-up .important-arrow {
          width: 3%; }
      .App-content .content-center .content-center-important .important-down {
        width: 100%;
        height: 50%;
        margin-top: 2%; }
        .App-content .content-center .content-center-important .important-down .important-forecast {
          width: 50%;
          height: 100%; }
          .App-content .content-center .content-center-important .important-down .important-forecast > div:nth-child(2) {
            display: none; }
        .App-content .content-center .content-center-important .important-down .machine-parameter {
          width: 50%;
          height: 100%; }
          .App-content .content-center .content-center-important .important-down .machine-parameter > div:nth-child(2) {
            display: none; }
        .App-content .content-center .content-center-important .important-down .important-forecast-content {
          position: absolute;
          left: 18%;
          top: 5%;
          font-size: 1rem; }
          .App-content .content-center .content-center-important .important-down .important-forecast-content div {
            margin: 1rem 0; }
    .App-content .content-center .linkageMap-content {
      width: 100%;
      height: 35%;
      background: url(df0aa6420aa0a7ed960acb34b4f73196.png) center no-repeat;
      background-size: contain;
      position: relative; }
      .App-content .content-center .linkageMap-content > img {
        position: absolute;
        display: inline-block;
        width: 8%; }
      .App-content .content-center .linkageMap-content img:nth-child(1) {
        top: 7%;
        right: 33.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(2) {
        top: 7%;
        left: 33.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(3) {
        top: 7%;
        left: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(4) {
        top: 32%;
        left: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(5) {
        bottom: 32%;
        left: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(6) {
        bottom: 6%;
        left: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(7) {
        bottom: 6%;
        left: 33.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(8) {
        bottom: 6%;
        right: 37.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(9) {
        bottom: 6%;
        right: 29%; }
      .App-content .content-center .linkageMap-content img:nth-child(10) {
        bottom: 6%;
        right: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(11) {
        bottom: 43%;
        right: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(12) {
        top: 7%;
        right: 9%; }
      .App-content .content-center .linkageMap-content img:nth-child(13) {
        bottom: 32%;
        left: 33.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(14) {
        top: 32%;
        left: 33.5%; }
      .App-content .content-center .linkageMap-content img:nth-child(15) {
        bottom: 32%;
        right: 33.5%; }
      .App-content .content-center .linkageMap-content .agv {
        position: absolute;
        bottom: 9%;
        left: 37%;
        z-index: 1;
        height: auto;
        -webkit-transform: scale(0.6);
            -ms-transform: scale(0.6);
                transform: scale(0.6); }
      .App-content .content-center .linkageMap-content .robot {
        position: absolute;
        bottom: 9%;
        right: 8%;
        z-index: 1;
        height: auto;
        -webkit-transform: scale(0.6);
            -ms-transform: scale(0.6);
                transform: scale(0.6); }
    .App-content .content-center .center-up {
      width: 104%;
      height: 40%;
      position: absolute;
      top: -0.2%;
      left: 50%;
      margin-left: -52%;
      background: url(7274ce1de15eed72de2d587b63263005.png) center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-center .content-center-important {
      width: 100%;
      height: 60%;
      padding-top: 8%;
      position: relative; }
      .App-content .content-center .content-center-important .important-up {
        margin-top: 0; }
      .App-content .content-center .content-center-important .important-down {
        height: 45%; }
      .App-content .content-center .content-center-important .important-title {
        position: absolute;
        top: 5%;
        color: #00ffff;
        height: auto;
        font-size: 1.2rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
    .App-content .content-center .center-down {
      width: 104%;
      height: 54.5%;
      position: absolute;
      bottom: 5.7%;
      left: 50%;
      margin-left: -52%;
      background: transparent;
      z-index: -1; }
      .App-content .content-center .center-down img {
        display: inline-block;
        width: 100%;
        height: 100%; }
  .App-content .content-right {
    width: 22.84%;
    margin-right: 1.3%;
    position: relative;
    overflow: hidden;
    /*.content-right-forecast {
      width: 100%;
      height: 30%;
      //border: 1px solid pink;
      >div:nth-child(2) {
        display: none;
      }
    }*/
    /*.content-right-communicate {
      width: 100%;
      height: auto;
      position: relative;

      .communicate-content {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;

        div {
          border-radius: .4rem;
        }

        >div:nth-child(1),>div:nth-child(3) {
          width: 70%;
          height: 3rem;
          border: 1px solid pink;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }

        >div:nth-child(5) {
          width: 70%;
          height: 3rem;
          border: 1px solid pink;
          position: relative;
          >div:nth-child(1) {
            width: auto;
            height: auto;
            text-align: center;
            margin: 0 auto;
          }
          >div:nth-child(2) {
            width: 70%;
            height: 40%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -35%;
          }
        }
        >div:nth-child(7) {
          width: 100%;
          height: 3rem;
          border: 1px solid pink;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
        >div:nth-child(8) {
          width: 100%;
          height: 3rem;
          border: 1px solid pink;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          div {
            width: 15%;
            border: 1px solid red;
          }
        }
        >div:nth-child(9) {
          width: 100%;
          height: 3rem;
          border: 1px solid pink;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          div {
            width: 15%;
            border: 1px solid red;
          }
        }
      }

      .communicate-guide {
        height: auto;
        position: absolute;
        top: .6rem;
        right: .6rem;

        div {
          margin-bottom: .6rem;
          i {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border-radius: 1rem;
            background-color: black;
            margin-right: .6rem;
          }
        }

      }
    }*/ }
    .App-content .content-right #right-title {
      width: 2%;
      height: auto;
      position: absolute;
      top: 1%;
      left: 3%;
      background-color: transparent;
      color: #00ffff;
      font-size: 1.2rem; }
    .App-content .content-right .right-up {
      width: 130%;
      height: 12.2%;
      position: absolute;
      top: -1%;
      right: -15%;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-right .right-center {
      width: 120%;
      height: 37%;
      position: absolute;
      top: 11.5%;
      left: -10%;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-right .right-down {
      width: 100%;
      height: 43.5%;
      position: absolute;
      bottom: 4%;
      right: 0;
      background: url() center no-repeat;
      background-size: contain;
      z-index: -1; }
    .App-content .content-right > div {
      margin: 4% 0; }
    .App-content .content-right .content-right-yieldActPressure {
      width: 100%;
      height: 10%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      .App-content .content-right .content-right-yieldActPressure div {
        width: 33%;
        height: 100%; }
      .App-content .content-right .content-right-yieldActPressure .yield div:first-child {
        background: url(663b3aa20512e0ae69f0ed28034f0fd7.png) center no-repeat;
        background-size: contain; }
      .App-content .content-right .content-right-yieldActPressure .activation div:first-child {
        width: 98% !important;
        height: 96% !important;
        background: url(8723956ebb0513c820eaacc5bc9d45f7.png) center no-repeat;
        background-size: contain;
        margin-top: 3% !important; }
      .App-content .content-right .content-right-yieldActPressure .pressure div:first-child {
        background: url(6bf0daa401b129af3509162a5783b472.png) center no-repeat;
        background-size: contain; }
    .App-content .content-right .content-right-yieldActivation {
      width: 100%;
      height: 14%;
      margin: 1rem 0; }
    .App-content .content-right .content-right-outputNoise {
      width: 100%;
      height: 5%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 1rem 0; }
      .App-content .content-right .content-right-outputNoise .output, .App-content .content-right .content-right-outputNoise .noise {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background: url() no-repeat;
        background-size: contain;
        font-size: 1rem; }
        .App-content .content-right .content-right-outputNoise .output span, .App-content .content-right .content-right-outputNoise .noise span {
          font-size: 1.4rem;
          color: #fbff7f; }
    .App-content .content-right .content-right-outputTrend {
      width: 100%;
      height: 13%;
      margin: 1rem 0; }
    .App-content .content-right .content-right-IOT {
      width: 100%;
      height: 40%;
      position: relative;
      margin-top: 8%; }
      .App-content .content-right .content-right-IOT > div {
        width: 60%;
        height: 10%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row;
                flex-flow: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-radius: .5rem;
        color: #fff; }
      .App-content .content-right .content-right-IOT > div:nth-child(2n+1) {
        background-color: #255fb3; }
      .App-content .content-right .content-right-IOT .right-IOT-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .App-content .content-right .content-right-IOT .right-IOT-2 img {
          width: 3.5%; }
      .App-content .content-right .content-right-IOT .right-IOT-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: transparent !important; }
        .App-content .content-right .content-right-IOT .right-IOT-3 div {
          width: 30%;
          height: 100%;
          background-color: #255fb3;
          border-radius: .5rem; }
      .App-content .content-right .content-right-IOT .right-IOT-6 img {
        width: 3.5%; }
      .App-content .content-right .content-right-IOT .right-IOT-7 {
        height: 20%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column nowrap;
                flex-flow: column nowrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center; }
        .App-content .content-right .content-right-IOT .right-IOT-7 .opc-client {
          width: 50%;
          background-color: #037BE3;
          border-radius: .5rem .5rem 0 0; }
      .App-content .content-right .content-right-IOT .right-IOT-8 img {
        width: 3.5%; }
      .App-content .content-right .content-right-IOT .right-IOT-9 {
        width: 95%; }
      .App-content .content-right .content-right-IOT .right-IOT-10 {
        width: 95%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-bottom: .5rem; }
        .App-content .content-right .content-right-IOT .right-IOT-10 img {
          width: 2.5%; }
      .App-content .content-right .content-right-IOT .right-IOT-11 {
        width: 95%;
        background-color: transparent !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .App-content .content-right .content-right-IOT .right-IOT-11 img {
          width: 15%; }
      .App-content .content-right .content-right-IOT .IOT-guide {
        width: auto;
        display: block;
        position: absolute;
        right: 2%;
        top: 0; }
        .App-content .content-right .content-right-IOT .IOT-guide > div {
          height: auto;
          width: auto; }
      .App-content .content-right .content-right-IOT .IOT-normal, .App-content .content-right .content-right-IOT .IOT-err {
        display: inline-block;
        width: .5rem;
        height: .5rem;
        border-radius: .5rem;
        margin: 0 .5rem; }
      .App-content .content-right .content-right-IOT .IOT-normal {
        background-color: #7fffaa; }
      .App-content .content-right .content-right-IOT .IOT-err {
        background-color: #ff4c76; }
